/*
 * Listeditor
 * Showing a list box and an edit button
 */
Ext.namespace('pacp');


pacp.listeditor = new Ext.extend(Ext.Panel, {
	/*
	 * panel settings
	 */
    title: '',
	
    collapsible: true,
    multiSelect: false,
	singleSelect: true,
    width: 750,
	
	frame: false,
    height: 150,
//	listHeight: 100,//same as height
    minWidth: 300,
    minHeight: 200,
	/*
	 * listview setting
	 */
	listLable: 'list label',
	listTitle: 'list title',
    columns: [],
    store: ds,
    hideHeaders: true,
    selectorLabel: 'Atlas',
	emptyText: 'Nothing selected',
//    layout: 'fit',
//    plain: true,
    initComponent: function(){
        this.items = this.buildUI();//item selector form
        
        pacp.listeditor.superclass.initComponent.apply(this, arguments);
        //add custom event
//        this.addEvents({
//            submitselection: true
//        })
    },
	/*
	 * loading data into the control
	 */
    loadData: function(data){
		
        this.store.loadData(data)
    },
	/*
	 * pass a function when the edit button is clicked
	 */
    onEdit: null,
	onClear: function(){
		this.store.removeAll()
	} ,
	onRemove: function(){
		Ext.each(this.listView.getSelectedRecords(), function(r, index){
					this.store.remove(r)
				});
	},
    
	buildUI: function(){
        var listView = new Ext.list.ListView({
            store: this.store,
            multiSelect: this.singleSelect == false,
            simpleSelect: this.singleSelect == false,
            singleSelect: this.singleSelect,
            name: 'itemselector',
            hideHeaders: this.hideHeaders,
            emptyText: this.emptyText,
            reserveScrollOffset: true,
            columns: this.columns
        });
        this.listView = listView;
        var editButton = new Ext.Button({
            text: 'Add',
			iconCls: 'silk-add',
            handler: this.onEdit
        })
		var clearButton = new Ext.Button({
			text: 'Clear',
			iconCls: 'silk-delete',
			handler: this.onClear,
			scope: this
		});
		var removeButton = new Ext.Button({
			text: 'Remove',
			iconCls: 'silk-delete',
			handler: this.onRemove,
			scope: this
		})
        var isForm = new Ext.form.FormPanel({
			frame: false,
            title: this.listTitle,
            width: this.width,
			layout: 'fit',
			height: this.height,
            items: [listView],
            tbar:  [{xtype: 'label', html: this.listLabel},'->','-', editButton,'-',removeButton,'-', clearButton, '-']
        });
        return isForm
    }
});





